﻿*,*:after,*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.switch label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* DEMO 1 */

.switch.demo1 {
  width: 22px;
  height: 22x;
}
.switch.demo1 label:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  background:url(../images/weixuanzhong_56x56.png) no-repeat 0 0; background-size:22px 22px;
}


.switch.demo1 input:checked ~ label:before {
  background:url(../images/xuanzhong_56x56.png) no-repeat 0 0; background-size:22px 22px;
}

/* DEMO 3 */

.switch.demo3 {
  width: 32px;
  height: 20px;
  padding:1px;
}

.switch.demo3 label {
  display: block;
  width: 100%;
  height: 100%;
  background: #ccc;
  border-radius: 30px;
}

.switch.demo3 label i {
  display: block;
  height: 18px;
  width: 18px;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0px;
  background: #fefefe;
 
}
.switch.demo3 input:checked ~ label {
  background: #59D698;
}

.switch.demo3 input:checked ~ label i {
  right: 0%;
}

/* DEMO 4 */

.switch.demo4 {
  width: 22px;
  height: 22x;
}
.switch.demo4 label:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 10px;
  top: 7px;
  background:url(../images/weixuanzhong_84x84.png) no-repeat 0 0; background-size:16px 16px;
}


.switch.demo4 input:checked ~ label:before {
  background:url(../images/xuanzhong_84x84..png) no-repeat 0 0; background-size:16px 16px;
}
